<template>
    <div class="app-containers">
      <el-row>
        <el-col :span="6"
          ><div class="grid-content one">
            <!-- 单位的选择 -->
            <el-container style="padding: 0;height: 100%;">
              <el-header
                class="smallHeader"
                style="height: 40px; line-height: 40px"
                >单位
              </el-header>
              <el-main class="smallmain">
                <el-tree
                  v-loading="loading"
                  :data="deptOptions"
                  :props="defaultProps"
                  accordion
                  :default-expanded-keys="['0']"
                  :expand-on-click-node="false"
                  highlight-current
                  ref="tree"
                  node-key="id"
                  :filter-node-method="filterNode"
                  @node-click="handleNodeClick"
                  :default-expand-all="false"
                >
                </el-tree>
              </el-main>
            </el-container>
          </div>
        </el-col>
        <el-col :span="12"
          ><div class="grid-content two">
            <!-- 人员的选择  -->
            <el-row>
              <el-col>
                <el-form
                  :model="queryParams"
                  ref="queryForm"
                  :inline="true"
                  label-width="40px"
                  style="height: 40px"
                  label-position="left"
                >
                  <el-form-item label="姓名" prop="userName">
                    <el-input
                      v-model.trim="queryParams.userName"
                      placeholder="请输入姓名"
                      clearable
                      style="width: 200px"
                      @keyup.enter="handleQuery"
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      type="primary"
                      @click="handleQuery"
                      >搜索</el-button
                    >
                    <el-button
                      @click="resetQuery"
                      >重置</el-button
                    >
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row>
              <!-- 多选时 -->
              <div v-show="isshow != 1" style="width: 100%">
                <el-table
                  v-loading="loading1"
                  ref="checked"
                  :data="userList"
                  tooltip-effect="dark"
                  row-key="uuid"
                  style="width: 100%; height: 440px"
                  @select="selectionRow"
                  @select-all="selectionRowAll"
                >
                  <el-table-column
                    type="selection"
                    width="55"
                    :reserve-selection="true"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="orgName"
                    label="部门"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="realName"
                    label="人员"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="mobile"
                    label="手机号"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <!-- <el-table-column
                      prop="ssex"
                      label="性别"
                      show-overflow-tooltip
                    >
                      <template slot-scope="scope">
                        <span v-if="scope.row.ssex == 0">男</span>
                        <span v-else-if="scope.row.ssex == 1">女</span>
                        <span v-else>未知</span>
                      </template>
                    </el-table-column> -->
                </el-table>
              </div>
            </el-row>
            <el-row>
              <!-- 单选时 -->
              <div class="wrapBox" v-show="isshow == 1" style="width: 100%;height: 440px;">
                <el-table
                  v-loading="loading1"
                  ref="radio"
                  :data="userList"
                  tooltip-effect="dark"
                  row-key="uuid"
                  style="width: 100%;height: 440px;"
                  :highlight-current-row="true"
                  @current-change="handleCurrentChange"
                >
                  <el-table-column
                    prop="orgName"
                    align="center"
                    label="部门"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    prop="realName"
                    align="center"
                    label="人员"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    prop="mobile"
                    align="center"
                    label="手机号"
                    show-overflow-tooltip
                  />
                  <!-- <el-table-column
                      prop="ssex"
                      label="性别"
                      show-overflow-tooltip
                    >
                      <template slot-scope="scope">
                        <span v-if="scope.row.ssex == 0">男</span>
                        <span v-else-if="scope.row.ssex == 1">女</span>
                        <span v-else>未知</span>
                      </template>
                    </el-table-column> -->
                </el-table>
              </div>
            </el-row>
            <el-row>
              <pagination
                style="margin-top: 15px;"
                v-show="total > 0"
                :total="total"
                v-model:page="queryParams.currentPage"
                v-model:limit="queryParams.pageSize"
                @pagination="getList"
              />
            </el-row>
          </div>
        </el-col>
        <el-col :span="6"
          ><div class="grid-content three">
            <!-- 已选人员 -->
            <el-container style="padding: 0;height: 100%;">
              <el-header
                class="smallHeader"
                style="height: 40px;"
                ><span>已选人员</span>
                <el-button
                  size="small"
                  plain
                  @click="toggleSelection()"
                  >删除全部</el-button
                >
              </el-header>
              <el-main class="smallmain tableBox">
                <p v-if="selectList.length == 0" class="nodata">暂无数据</p>
                <div class="tagBox" v-else>
                  <el-tag
                    class="tag"
                    :key="tag.uuid"
                    v-for="tag in selectList"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                  >
                    <span class="tagItem">{{ tag.orgName }}</span>
                    <span class="tagItem">{{ tag.realName }}</span>
                    <span class="tagItem">{{ tag.mobile }}</span>
                    <!-- <span v-if="tag.ssex == 0" class="tagItem">男</span>
                    <span v-else-if="tag.ssex == 1" class="tagItem">女</span>
                    <span v-else class="tagItem">未知</span> -->
                  </el-tag>
                </div>
              </el-main>
            </el-container>
          </div>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup>
  import { queryUserList, treeSelectDept, treeAllSelectDept } from "@/api/taskmanage/group.js";
  const emits = defineEmits(['getSelectList']);
  
  const props = defineProps({
    // 父组件修改时传过来的数据
    inputValue: {
      type: Array,
      required: false,
    },
    // 单选时从父组件传值设置为单选 1 为单选 2为多选（默认）
    isshow: {
      type: Number,
      required: false,
    },
  });
  
  const defaultProps = reactive({
    children: "children",
    label: "label",
  });
  // // 选中的人员
  const loading = ref(false); // 加载
  const loading1 = ref(false); // 加载
  const total = ref(0);
  let state = reactive({
    deptOptions: [], // 部门树选项
    userList: [], // 用户表格数据
    selectList: [], // 最终选中传给父组件的人员
  });
  const queryParams = reactive({
    orgId: "",
    userName: "",
    pageSize: 10,
    currentPage: 1,
  });
  const checked = ref();
  const radio = ref();
  const { deptOptions, userList, selectList } = toRefs(state);
  const { inputValue, isshow } = toRefs(props);
  
  // 单选表格
  function handleCurrentChange(val) {
    selectList.value = [val];
  }
  // 部门  树形数据
  // 处理数据
  function disposeata(data) {
    data.forEach((item) => {
      item.label = item.name;
      item.children && disposeata(item.children);
      delete item.open
    });
    return data
  }
  function getTreeselect(orgId) {
    loading.value = true;
    treeSelectDept(orgId).then((response) => {
      loading.value = false;
      nextTick(() => {
      	if(response.data!=null){
      		deptOptions.value =disposeata([response.data]);
      	}else{
      		deptOptions.value = [];
      	}
      });
    });
  }
  
  function getAllTreeselect() {
    loading.value = true;
    treeAllSelectDept().then((response) => {
      loading.value = false;
      nextTick(() => {
      	if(response.data!=null){
      		deptOptions.value =disposeata([response.data]);
      	}else{
      		deptOptions.value = [];
      	}
      });
    });
  }
  
  // 筛选节点
  function filterNode(value, data) {
    if (!value) return true;
    return data.label.indexOf(value) !== -1;
  }
  
  // 树形节点单击事件
  function handleNodeClick(data) {
    queryParams.orgId = data.id;
    getList();
  }
  
  
  /** 查询用户列表 */
  function getList() {
    loading1.value = true;
    queryUserList(queryParams).then((response) => {
      loading1.value = false;
      nextTick(() => {
        userList.value = response.data.results;
        total.value = response.data.totalRows;
      });
      checked.value.clearSelection(); //清除回显
      //  多选表格样式回显
      userList.value.forEach((i) => {
        selectList.value.forEach((item) => {
          if (i.uuid == item.uuid) {
            isshow.value != 1
              ? checked.value.toggleRowSelection(item) //多选
              : radio.value.setCurrentRow(item, true); // 单选高亮某一行
          }
        });
      });
    });
  }
  
  // 表格===>> 取消选择
  function toggleSelection(rows) {
    selectList.value = [];
    checked.value.clearSelection();
    if (isshow.value == 1) {
      radio.value.setCurrentRow();
      selectList.value.splice(selectList.value.indexOf(rows), 1);
    }
  }
  /** 搜索按钮操作 */
  function handleQuery() {
    queryParams.currentPage = 1;
    getList();
  }
  /** 重置按钮操作 */
  function resetQuery() {
    queryParams.userName = "";
    handleQuery();
  }
  
  // 已选人员===>>> 删除
  function handleClose(tag) {
    // 多选
    if (isshow.value != 1) {
      selectList.value.splice(selectList.value.indexOf(tag), 1);
      checked.value.toggleRowSelection(tag, false);
    }
    // 单选
    if (isshow.value == 1) {
      radio.value.setCurrentRow();
      selectList.value.splice(selectList.value.indexOf(tag), 1);
    }
    if (inputValue.value) {
      checked.value.toggleRowSelection(tag, false); //多选
      getList();
    }
  }
  // 判断复选框状态
  function selectionRow(selection, row) {
    let selected = selection.length && selection.indexOf(row) !== -1; //为true时选中，为 0（或者false）时未选中
    if (selected) {
      selectList.value.unshift(row);
    } else {
      for (let i = 0; i < selectList.value.length; i++) {
        if (row.uuid == selectList.value[i].uuid) {
          selectList.value.splice(i, 1);
        }
      }
    }
  }
  //表格全选事件
  function selectionRowAll(selection) {
    if (selection.length) {
      let list = selection;
      for (let i = 0; i < list.length; i++) {
        for (let j = 0; j < selectList.value.length; j++) {
          if (list[i].uuid == selectList.value[j].uuid) {
            selectList.value.splice(j, 1);
          }
        }
      }
      list.forEach((item) => {
        selectList.value.unshift(item);
      });
    } else {
      userList.value.forEach((item) => {
        selectList.value.splice(selectList.value.indexOf(item), 1);
      });
    }
  }
  
  function submit() {
    emits("getSelectList", selectList.value);
    reset();
  }
  
  function reset() {
    userList.value = [];
    selectList.value = [];
    queryParams.userName = "";
  }
  
  defineExpose({
    reset,
    submit,
    getTreeselect,
    getAllTreeselect,
  });
  </script>
  
  <style scoped>
  .app-containers ::-webkit-scrollbar {
    display: none;
    height: 560px;
  }
  
  .one,
  .three,
  .two {
    height: 550px;
    width: 100%;
    border: solid 1px #dadada;
    overflow: hidden;
  }
  .one {
    width: 95%;
  }
  .two {
    border: 1px solid transparent;
  }
  .three {
    margin-left: 14px;
    width: 99%;
    box-sizing: border-box;
    overflow: auto;
  }
  .el-main,
  .smallmain {
    overflow: auto;
    padding: 0;
  }
  
  .smallHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #1890ff;
    position: relative;
    color: #fff;
    font-weight: 700;
    overflow: hidden;
    height: calc(100% - 40px);
  }
  .open,
  .smallmain :deep(.el-tree-node:focus)  > .el-tree-node__content {
    background-color: #83bff8 !important;
  }
  .smallmain :deep(.el-tree-node__content:hover)  {
    background-color: #dadada;
  }
  .smallmain
    :deep(.el-tree--highlight-current) 
    .el-tree-node.is-current
    > .el-tree-node__content {
    background-color: #83bff8;
  }
  .tableBox :deep(.el-table)  {
    margin: 0;
  }
  .radio {
    position: relative;
  }
  .nodata {
    width: 100%;
    text-align: center;
    line-height: 40px;
    height: 40px;
  }
  .tagBox {
    width: 100%;
  }
  .tag {
    width: 100%;
    height: 38px;
  }
  .tagItem {
    display: inline-block;
    width: calc(100% / 3.2);
    text-align: center;
    /* 单行文本溢出省略号 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wrapBox :deep(.el-table__body tr.current-row) > td {
    background-color: #83bff8 !important;
  }
  .wrapBox :deep(.el-table)  tbody tr:hover > td {
    background-color: #dadada;
  }
  :deep(.el-tag) {
    margin-left: 0px;
  }
  
  :deep(.is-last){
    position:absolute;top:-9999px;
    /* display: none; */
  }
  :deep(.el-pagination__sizes){
    position:absolute;top:-9999px;
    /* display: none; */
  }
  </style>
  
  